<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主流编码设置</title>
<link rel="stylesheet" href="/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/config.css">

<link rel="icon" href="favicon.png" type="image/png"/>

<script src="/script/jquery-1.10.2.js"></script>
<script src="/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="/script/rgbcolor.js"></script>

</head>

<body>

<div id="header">
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	
	    <div class="navbar-header">
	        <img alt="Brand" src="/image/logo.png">
	    </div>
    	
	 	<ul class="nav navbar-nav">
	 		<li><a>高清编码器配置操作平台</a></li>
	 	</ul>
 	
	 	<ul class="nav navbar-nav navbar-right">
	      <li><a href="support.html">更多服务与支持</a></li>
	    </ul>
 	
	</div>
</nav>
</div>


<div class="container">
	<div class="page-header text-center">
		<h3>主流编码设置</h3>
	</div>
    <div class="panel panel-default">
	  <div class="panel-heading">主流编码设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">编码方式</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-codec">
						<option value="H.264">H.264</option>
						<option value="H.265">H.265</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">编码算法</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-profile">
						<option value="baseline">baseline</option>
						<option value="main">main</option>
						<option value="high">high</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">编码帧率</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="编码帧率" id="text-framerate" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[5-60]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">码流控制</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-bitmode">
						<option value="0">CBR</option>
						<option value="1">VBR</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">minQp</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="" id="text-minQp" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[1-51]</div>
			</div>
			
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">maxQp</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="" id="text-maxQp" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[minQp-51]</div>
			</div>
			
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">关键帧间隔</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="关键帧间隔" id="text-gop" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[2-200]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">编码后尺寸</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-resolution">
						<option value="0*0">自动</option>
						<option value="1920*1080">1920*1080</option>
						<option value="1280*720">1280*720</option>
						<option value="720*576">720*576</option>
						<option value="640*480">640*480</option>
						<option value="352*288">352*288</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">视频比特率(K)</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="视频比特率(K)" id="text-bitrate" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[16-12000]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">波动范围</label>
				<div class="col-sm-5">
					<select class="form-control" id="select-tolerate">
						<option value="0">自动</option>
						<option value="1">1</option>
						<option value="2">2</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setVideoParam()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">主流协议设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">HTTP</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="HTTP" id="text-http-name"  disabled="disabled" maxlength="20">
				</div>
				<div class="col-sm-2">
					<select class="form-control" id="select-http"  disabled="disabled">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
				<div class="col-sm-3 text-info">
					格式如: /main (以"/"开头再加上字母数字下划线任意组合)
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">HTTP端口</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="HTTP端口" id="text-http-port" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[1-65535]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTSP</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTSP" id="text-rtsp-name" maxlength="20">
				</div>
				<div class="col-sm-2">
					<select class="form-control" id="select-rtsp">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
				<div class="col-sm-3 text-info">
					格式如: /main (以"/"开头再加上字母数字下划线任意组合)
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTSP端口</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTSP端口" id="text-rtsp-port" maxlength="5" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[1-65535]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">组播IP</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="组播IP" id="text-multicast-ip"  disabled="disabled" maxlength="20">
				</div>
				<div class="col-sm-2">
					<select class="form-control" id="select-multicast"  disabled="disabled">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">组播端口</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="组播端口" id="text-multicast-port"  disabled="disabled" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[1-65535]</div>
			</div>
			
			<div class="form-group">
				<label for="text-ts-ip" class="col-sm-2 control-label">TS流接收地址</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="IP" id="text-ts-ip" maxlength="20">
				</div>
				<div class="col-sm-2">
					<select class="form-control" id="select-ts">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">TS流接收端口</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="端口" id="text-ts-port" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[1-65535]</div>
			</div>
			
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传服务器地址</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传服务器地址" id="text-rtmp-ip" maxlength="20">
				</div>
				<div class="col-sm-2">
					<select class="form-control" id="select-rtmp">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传服务器端口</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传服务器端口" id="text-rtmp-port" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[1-65535]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传目录名</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传目录名" id="text-rtmp-dir" maxlength="20">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传节点</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传节点" id="text-rtmp-node" maxlength="20">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传用户名</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传用户名" id="text-rtmp-user" maxlength="20">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">RTMP上传密码</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="RTMP上传密码" id="text-rtmp-password" maxlength="20">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">ONVIF</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-onvif" disabled="disabled">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">物联网</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-iot"  disabled="disabled">
						<option value="disabled">禁用</option>
						<option value="enabled">启用</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setProtocolParam()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>

	<div class="panel panel-default">
	  <div class="panel-heading">OSD设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本X坐标1</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本X坐标1" id="text-osd1-x" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-1920]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本Y坐标1</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本Y坐标1" id="text-osd1-y" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-1080]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">字体大小1</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="字体大小1" id="text-osd1-font-size" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[8-72]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">透明度1</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="透明度1" id="text-osd1-opacity" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-128]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本颜色1</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-osd1-color">
						<option value="#FF0000">红色</option>
						<option value="#00FFFF">蓝绿色</option>
						<option value="#0000FF">蓝色</option>
						<option value="#0000A0">深蓝色</option>
						<option value="#ADD8E6">浅蓝色</option>
						<option value="#800080">紫色</option>
						<option value="#FFFF00">黄色</option>
						<option value="#ADFF2F">绿黄色</option>
						<option value="#FF00FF">品红色</option>
						<option value="#FFFFFF">白色</option>
						<option value="#C0C0C0">银色</option>
						<option value="#808080">灰色</option>
						<option value="#000000">黑色</option>
						<option value="#FFA500">橘黄色</option>
						<option value="#A52A2A">棕色</option>
						<option value="#800000">栗色</option>
						<option value="#00FF00">绿色</option>
						<option value="#808000">橄榄色</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本背景颜色1</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-osd1-bkcolor">
						<option value="#FFFFEE">透明</option>
						<option value="#FF0000">红色</option>
						<option value="#00FFFF">蓝绿色</option>
						<option value="#0000FF">蓝色</option>
						<option value="#0000A0">深蓝色</option>
						<option value="#ADD8E6">浅蓝色</option>
						<option value="#800080">紫色</option>
						<option value="#FFFF00">黄色</option>
						<option value="#ADFF2F">绿黄色</option>
						<option value="#FF00FF">品红色</option>
						<option value="#FFFFFF">白色</option>
						<option value="#C0C0C0">银色</option>
						<option value="#808080">灰色</option>
						<option value="#000000">黑色</option>
						<option value="#FFA500">橘黄色</option>
						<option value="#A52A2A">棕色</option>
						<option value="#800000">栗色</option>
						<option value="#00FF00">绿色</option>
						<option value="#808000">橄榄色</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本1</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本1" id="text-osd1-text" maxlength="20">
				</div>
			</div>
			

			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本X坐标2</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本X坐标2" id="text-osd2-x" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-1920]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本Y坐标2</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本Y坐标2" id="text-osd2-y" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-1080]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">字体大小2</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="字体大小2" id="text-osd2-font-size" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[8-72]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">透明度2</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="透明度2" id="text-osd2-opacity" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-sm-3 text-info">[0-128]</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本颜色2</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-osd2-color">
						<option value="#FF0000">红色</option>
						<option value="#00FFFF">蓝绿色</option>
						<option value="#0000FF">蓝色</option>
						<option value="#0000A0">深蓝色</option>
						<option value="#ADD8E6">浅蓝色</option>
						<option value="#800080">紫色</option>
						<option value="#FFFF00">黄色</option>
						<option value="#ADFF2F">绿黄色</option>
						<option value="#FF00FF">品红色</option>
						<option value="#FFFFFF">白色</option>
						<option value="#C0C0C0">银色</option>
						<option value="#808080">灰色</option>
						<option value="#000000">黑色</option>
						<option value="#FFA500">橘黄色</option>
						<option value="#A52A2A">棕色</option>
						<option value="#800000">栗色</option>
						<option value="#00FF00">绿色</option>
						<option value="#808000">橄榄色</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本背景颜色2</label>
				<div class="col-sm-4">
					<select class="form-control" id="select-osd2-bkcolor">
						<option value="#FFFFEE">透明</option>
						<option value="#FF0000">红色</option>
						<option value="#00FFFF">蓝绿色</option>
						<option value="#0000FF">蓝色</option>
						<option value="#0000A0">深蓝色</option>
						<option value="#ADD8E6">浅蓝色</option>
						<option value="#800080">紫色</option>
						<option value="#FFFF00">黄色</option>
						<option value="#00FF00">绿黄色</option>
						<option value="#FF00FF">品红色</option>
						<option value="#FFFFFF">白色</option>
						<option value="#C0C0C0">银色</option>
						<option value="#808080">灰色</option>
						<option value="#000000">黑色</option>
						<option value="#FFA500">橘黄色</option>
						<option value="#A52A2A">棕色</option>
						<option value="#800000">栗色</option>
						<option value="#00FF00">绿色</option>
						<option value="#808000">橄榄色</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">文本2</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" placeholder="文本2" id="text-osd2-text" maxlength="20">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setOsdParam()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>
	
	<div class="panel panel-default">
	  <div class="panel-heading">图像质量设置</div>
	  <div class="panel-body">
	    <div class="form-horizontal">
			<div class="form-group">
				<label for="text-brightness" class="col-sm-2 control-label">亮度</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="亮度" id="text-brightness" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[0-100]  默认值:50</div>
			</div>
			
			<div class="form-group">
				<label for="text-contrast" class="col-sm-2 control-label">对比度</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="对比度" id="text-contrast" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[0-100]  默认值:50</div>
			</div>
			
			<div class="form-group">
				<label for="text-hue" class="col-sm-2 control-label">色度</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="色度" id="text-hue" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[0-100]  默认值:50</div>
			</div>
			
			<div class="form-group">
				<label for="text-saturation" class="col-sm-2 control-label">饱和度</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" placeholder="饱和度" id="text-saturation" maxlength="3" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d.]/g,''))">
				</div>
				<div class="col-md-5 text-info">[0-100]  默认值:50</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" onclick="setVideoChroma()">设置</button>
				</div>
			</div>
		</div>
	  </div>
	</div>
	
</div>


<footer id="footer">
	<nav class="navbar navbar-default navbar-fixed-bottom">
	   <div class="center">
	      <ul class="nav navbar-nav">
	         <li><a href="index.html">状态显示</a></li>
	         <li><a href="network.html">网络设置</a></li>
	         <li><a href="master-video.html">主流编码设置</a></li>
	         <li><a href="sub-video.html">副流编码设置</a></li>
	         <li><a href="audio.html">音频编码设置</a></li>
	         <li><a href="system.html">系统设置</a></li>
	      </ul>
	   </div>
	   
	   	<div class="container center">
		<a href="#">高清编码器配置操作平台</a>
		</div>
	</nav>

</footer>


<script type="text/javascript">

function getBaseUri() {
	var baseUri="http://" + window.location.host;
	return baseUri;
}

function toEnable(b) {
	return b ? "enabled" : "disabled";
}

function fromEnable(text) {
	return text == "enabled";
}

$(document).ready(function() {
	$("#footer li:eq(2)").addClass("active");

	fetchVideoParam();
	fetchProtocolParam();
	fetchOsdParam();
	fetchVideoChroma();
	
	$("#select-bitmode").change(function(){
		var disabled = $(this).get(0).selectedIndex == 0;
		disableQp(disabled);
	});
	
});

function fetchVideoParam() {
	$.getJSON(getBaseUri() + '/api/video?index=0', function(data) {
		var video = data;
		
		$("#select-codec").val(video.codec);
		$("#select-profile").val(video.profile);
		$("#text-framerate").val(video.framerate);
		$("#select-bitmode").val(video.bitmode);
		$("#text-gop").val(video.gop);
		$("#select-resolution").val(video.resolution);
		$("#text-bitrate").val(video.bitrate);
		$("#select-tolerate").val(video.tolerate);
		$("#text-minQp").val(video.minQp);
		$("#text-maxQp").val(video.maxQp);

		var disabled = (video.bitmode == 0);
		disableQp(disabled);
		
	});
}

function fetchProtocolParam() {
	$.getJSON(getBaseUri() + '/api/protocol?index=0', function(data) {
		var protocol = data;
		
		$("#text-http-name").val(protocol.httpName);
		$("#select-http").val(toEnable(protocol.httpEnabled));
		$("#text-http-port").val(protocol.httpPort);
		
		$("#text-rtsp-name").val(protocol.rtspName);
		$("#select-rtsp").val(toEnable(protocol.rtspEnabled));
		$("#text-rtsp-port").val(protocol.rtspPort);
		
		$("#text-multicast-ip").val(protocol.multicastAddr);
		$("#text-multicast-port").val(protocol.multicastPort);
		$("#select-multicast").val(toEnable(protocol.multicastEnabled));
		
		$("#text-ts-ip").val(protocol.tsAddr);
		$("#text-ts-port").val(protocol.tsPort);
		$("#select-ts").val(toEnable(protocol.tsEnabled));
		
		$("#text-rtmp-ip").val(protocol.rtmpAddr);
		$("#select-rtmp").val(toEnable(protocol.rtmpEnabled));
		$("#text-rtmp-port").val(protocol.rtmpPort);
		$("#text-rtmp-dir").val(protocol.rtmpDir);
		$("#text-rtmp-node").val(protocol.rtmpNode);
		$("#text-rtmp-user").val(protocol.rtmpUser);
		$("#text-rtmp-password").val(protocol.rtmpPassword);
		
		$("#select-onvif").val(toEnable(protocol.onvifEnabled));
		$("#select-iot").val(toEnable(protocol.iotEnabled));
	});
}

function fetchOsdParam() {
	$.getJSON(getBaseUri() + '/api/osd?index=0', function(data) {
		var osd1 = data[0];
		
		$("#text-osd1-x").val(osd1.x);
		$("#text-osd1-y").val(osd1.y);
		$("#text-osd1-font-size").val(osd1.fontSize);
		$("#text-osd1-opacity").val(osd1.opacity);
		$("#select-osd1-color").val(intToHex(osd1.textColor));
		$("#select-osd1-bkcolor").val(intToHex(osd1.bkColor));
		$("#text-osd1-text").val(osd1.text);
		
		var osd2 = data[1];
		
		$("#text-osd2-x").val(osd2.x);
		$("#text-osd2-y").val(osd2.y);
		$("#text-osd2-font-size").val(osd2.fontSize);
		$("#text-osd2-opacity").val(osd2.opacity);
		$("#select-osd2-color").val(intToHex(osd2.textColor));
		$("#select-osd2-bkcolor").val(intToHex(osd2.bkColor));
		$("#text-osd2-text").val(osd2.text);
		
	});
	
}

function fetchVideoChroma() {
	$.getJSON(getBaseUri() + '/api/chroma?index=0', function(data) {
		var chroma = data;
		
		$("#text-brightness").val(chroma.brightness);
		$("#text-contrast").val(chroma.contrast);
		$("#text-hue").val(chroma.hue);
		$("#text-saturation").val(chroma.saturation);
	});
}


function setVideoParam() {
	var video = {
			codec: $("#select-codec").val(),
			profile: $("#select-profile").val(),
			framerate: $("#text-framerate").val(),
			bitmode: $("#select-bitmode").val(),
			gop: $("#text-gop").val(),
			resolution: $("#select-resolution").val(),
			bitrate: $("#text-bitrate").val(),
			tolerate : $("#select-tolerate").val(),
			minQp: $("#text-minQp").val(),
			maxQp: $("#text-maxQp").val()
	};	
	
	var content = JSON.stringify(video);
	$.post(getBaseUri() + '/api/video?index=0', content, function(data){
		alert("设置视频参数成功");
	});
}

function setProtocolParam() {
	var protocol = {
		httpName: $("#text-http-name").val(),
		httpEnabled: fromEnable($("#select-http").val()),
		httpPort: $("#text-http-port").val(),
		
		rtspName: $("#text-rtsp-name").val(),
		rtspEnabled: fromEnable($("#select-rtsp").val()),
		rtspPort: $("#text-rtsp-port").val(),
		
		multicastAddr: $("#text-multicast-ip").val(),
		multicastPort: $("#text-multicast-port").val(),
		multicastEnabled: fromEnable($("#select-multicast").val()),
		
		tsAddr: $("#text-ts-ip").val(),
		tsPort: $("#text-ts-port").val(),
		tsEnabled: fromEnable($("#select-ts").val()),
		
		rtmpAddr: $("#text-rtmp-ip").val(),
		rtmpEnabled: fromEnable($("#select-rtmp").val()),
		rtmpPort: $("#text-rtmp-port").val(),
		rtmpDir: $("#text-rtmp-dir").val(),
		rtmpNode: $("#text-rtmp-node").val(),
		rtmpUser: $("#text-rtmp-user").val(),
		rtmpPassword: $("#text-rtmp-password").val(),
		onvifEnabled: fromEnable($("#select-onvif").val()),
		iotEnabled: fromEnable($("#select-iot").val())
	};	
	
	var content = JSON.stringify(protocol);
	$.post(getBaseUri() + '/api/protocol?index=0', content, function(data){
		alert("设置协议参数成功");
	});
}

function setOsdParam() {
	
	var osd1 = {
			x: $("#text-osd1-x").val(),
			y: $("#text-osd1-y").val(),
			fontSize: $("#text-osd1-font-size").val(),
			opacity: $("#text-osd1-opacity").val(),
			textColor: hexToInt($("#select-osd1-color").val()),
			bkColor: hexToInt($("#select-osd1-bkcolor").val()),
			text: $("#text-osd1-text").val()
	};
	
	var osd2 = {
			x: $("#text-osd2-x").val(),
			y: $("#text-osd2-y").val(),
			fontSize: $("#text-osd2-font-size").val(),
			opacity: $("#text-osd2-opacity").val(),
			textColor: hexToInt($("#select-osd2-color").val()),
			bkColor: hexToInt($("#select-osd2-bkcolor").val()),
			text: $("#text-osd2-text").val()
	};
	
	var osd = [osd1, osd2];
	var content = JSON.stringify(osd);
	$.post(getBaseUri() + '/api/osd?index=0', content, function(data){
		alert("设置OSD参数成功");
	});


}

function setVideoChroma() {
	var chroma = {
			brightness: $("#text-brightness").val(),
			contrast: $("#text-contrast").val(),
			hue: $("#text-hue").val(),
			saturation: $("#text-saturation").val()
	};
	
	var content = JSON.stringify(chroma);
	$.post(getBaseUri() + '/api/chroma?index=0', content, function(data){
		alert("设置图像质量参数成功");
	});
	
}

function disableQp(disabled) {
	$("#text-minQp").prop('disabled', disabled);
	$("#text-maxQp").prop('disabled', disabled);
}



</script>


</body>
</html>